<script setup lang="ts">
import {Button} from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuItem,
  DropdownMenuContent
} from "@/components/ui/dropdown-menu";
import {LanguagesIcon} from "lucide-vue-next";

const languages = [
  {
    label: 'Chinese',
    value: 'zh'
  },
  {
    label: 'English',
    value: 'en'
  }
]

function changeLanguage(lang) {
  console.log(lang)
}

</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">
        <Component :is="LanguagesIcon" size="16"/>
        <span class="sr-only">Toggle Language</span>
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuItem
          v-for="(lang, index) in languages"
          :key="index"
          @click="changeLanguage(lang.value)"
          :value="lang.value">
        {{ lang.label }}
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

<style scoped>

</style>
